<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .reds{
            color: red;
        }
    </style>
</head>
<body>
    <script src="./js/react.development.js"></script>
     <script src="./js/react-dom.development.js"></script>
     <script src="./js/babel.min.js"></script>

     <div id="test"></div>
    <script type="text/babel">
        const name = '张三'
        const age = 12
        const mystyle = 'reds'

        const s = {
            color:'red',
            border:'1px solid red'
        }

        const arr = ['Angular','React','Vue'] // React 默认可以遍历数组

        // jsx 在标签里插值带{}
        // jsx 与 js的不同
        /*
            1 className  -> class
            2 style='' ->  style={ {键:值 }  }
            
        */
        let DOM  = (
            <div>
                   <h2 className={mystyle}>hello</h2>
                    <h3 style={{color:'red'}}>{name}</h3>
                    <h3 style={s}>{age}</h3>
                    <input type="text"/>
                    <br/>
                    <div>
                        <h1>前端框架列表</h1>
                        <ul>
                            {arr}
                        </ul>
                        <ul>
                            {
                                arr.map((v,i)=>{
                                    return <li key={i}>{v}</li>
                                })
                            }
                        </ul>
                    </div>
            </div>
        )
        /*  
        <good>good</good>
         <Good>Good</Good>
         */
        ReactDOM.render(DOM,document.querySelector('#test'))
        /* 
        
        jsx的规则
         1  DOM 不要引号
         2  插值用{}
         3 class 是 className
         4 内联样式使用 style={{key:value}}
         5 虚拟DOM 必须只有一个跟标签
         6 标签必须闭合   <input type="text"> 必须是 < --- />
         7 标签大小写
            (1) 若为小写开头 React 默认为html标签
            (2) 若大写开头 React 就当做组件

         */

         /*
            区分【js代码】和【js表达式】
            表达式： 一个表达式会产生一个变量   如
                1 a
                2 a+b
                3 func() // 有返回值
                4 arr.map  
                5 function anme (){}
         */

    </script>
</body>
</html>